<!DOCTYPE html>
<html lang=zh-CN>

    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
        <title>pcguide</title>
        <script type="text/javascript">
						var viewPath = location.hash
						if (viewPath && viewPath.indexOf("index.html") > -1) {
							viewPath = '/h5/'
						}else if (viewPath){
							viewPath = viewPath.slice(1)
						} else {
							viewPath = '/h5/'
						}
            function redirectToLaunch() {
                if (document.documentElement.clientWidth <= 1024) {
                    location.href = viewPath;
                }
            };
            redirectToLaunch();

            var timer = null;
            window.addEventListener('resize', function() {
                timer && clearTimeout(timer);
                timer = setTimeout(function() {
                    redirectToLaunch();
                }, 500);
            });
						function hasClass(ele, cls) {
						  cls = cls || '';
						  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
						  return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
						}
						function addClass(ele, cls) {
						  if (!hasClass(ele, cls)) {
						    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
						  }
						}
						 
						function removeClass(ele, cls) {
						  if (hasClass(ele, cls)) {
						    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
						    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
						      newClass = newClass.replace(' ' + cls + ' ', ' ');
						    }
						    ele.className = newClass.replace(/^\s+|\s+$/g, '');
						  }
						}
						
						function copy(id, attr) {
						    var target = null;
						
						    if (attr) {
						        target = document.createElement('div');
						        target.id = 'tempTarget';
						        target.style.opacity = '0';
						        if (id) {
						            var curNode = document.querySelector('#' + id);
						            target.innerText = curNode[attr];
						        } else {
						            target.innerText = attr;
						        }
						        document.body.appendChild(target);
						    } else {
						        target = document.querySelector('#' + id);
						    }
						
						    try {
						        var range = document.createRange();
						        range.selectNode(target);
						        window.getSelection().removeAllRanges();
						        window.getSelection().addRange(range);
						        document.execCommand('copy');
						        window.getSelection().removeAllRanges();
						        document.getElementById("copy-link-tooltip").innerText = '复制成功'
						    } catch (e) {
						        document.getElementById("copy-link-tooltip").innerText = '复制失败'
						    }
						
						    if (attr) {
						        // remove temp target
						        target.parentElement.removeChild(target);
						    }
						}
						
						document.addEventListener('DOMContentLoaded', function() {
								document.getElementById("h5-viwer").src = viewPath
								var tooltip = document.getElementById("copy-link-tooltip"),
										viewFrame = document.getElementById("h5-viwer")
								document.getElementById("copy-link-btn").addEventListener("click",function(){
									copy('',viewFrame.contentWindow.location.href)
									addClass(tooltip,"show")
									setTimeout(function(){
										removeClass(tooltip,"show")
									},1000);
								})
						}, false);
        </script>
        <style type="text/css">
            body {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            
            .wrapper {
                width: 500px;
                height: 500px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -500px;
                text-align: center;
            }
            
            .barcode-image {
                display: inline-block;
                vertical-align: middle;
                width: 200px;
                height: 200px;
            }
            
            .list {
                width: 500px;
            }
            
            .h5-viwer-box {
                position: absolute;
                width: 45vh;
                height: 80vh;
                right: 50px;
                top: 8vh;
                box-sizing: content-box;
                border: solid 10px #000000;
                border-radius: 10px;
                box-shadow: #DDDDDD 10px 10px 20px;
            }
            
            .h5-viwer {
                width: 45vh;
                height: 80vh;
                border: 0;
                padding: 0;
            }
						
						.h5-copy-link {
							position: absolute;
							width: 45vh;
							height: 40px;
							right: 50px;
							bottom: 4vh;
							text-align: center;
						}
						
						#copy-link-btn {
							display: inline-block;
							width: 100px;
							height: 40px;
							text-align: center;
							line-height: 40px;
							border-radius: 6px;
							color: white;
							font-size: 16px;
							cursor: pointer;
							user-select: none;
							-ms-user-select: none;
							-moz-user-select: none;
							-webkit-user-select: none;
							background-color: #42b983;
						}
						
						#copy-link-btn:active {
							opacity: 0.7;
						}
						
						#copy-link-tooltip {
							position: absolute;
							width: 100px;
							height: 30px;
							left: 50%;
							top: 5px;
							margin-left: 120px;
							line-height: 30px;
							color: white;
							background-color: rgba(0,0,0,0.5);
							border-radius: 6px;
							opacity: 0;
							transition: all 0.3s ease;
							-ms-transition: all 0.3s ease;
							-moz-transition: all 0.3s ease;
							-webkit-transition: all 0.3s ease;
						}
						
						
						#copy-link-tooltip:after{
							content: "";
							position: absolute;
							width: 0;
							height: 0;
							right: 100%;
							top: 50%;
							margin-top: -8px;
							border: solid 8px transparent;
							border-right: solid 8px rgba(0,0,0,0.5);
						}
						
						#copy-link-tooltip.show{
							opacity: 1;
							transform: translateX(-50px);
							-ms-transform: translateX(-50px);
							-moz-transform: translateX(-50px);
							-webkit-transform: translateX(-50px);
						}
        </style>
    </head>

    <body>
        <div class="wrapper">
            <img class="barcode-image" src="" alt="二维码">
            <div class="list">
                <p class="list-cell">请使用手机浏览器，扫描上方二维码预览。</p>
                <p class="list-cell">PC浏览器，请打开控制台并切换至手机模式后并再次刷新浏览。</p>
            </div>
        </div>
        <div class="h5-viwer-box">
            <iframe id="h5-viwer" class="h5-viwer" src="/h5/" width="414" height="736"></iframe>
        </div>
				<div class="h5-copy-link">
						<span id="copy-link-tooltip">复制成功</span>
						<div id="copy-link-btn">复制链接</div>
				</div>
    </body>

</html>